<template>
	<div>
	<!-- 添加计划 -->
	<el-dialog v-model="playDialogVisible" title="添加计划" width="450" align-center center @close="close()">
		<div>
			<el-form ref="planForm" :model="planForm" :rules="rules" :inline="true">
				<el-form-item label="客户姓名" prop="customerName" :label-width="90">
					<el-input size="large" @focus="chooseCustomer" 
						v-model="planForm.customerName" style="width: 320px" placeholder="请输入" />
					<!-- <el-select style="width: 320px;" v-model="planForm.customerId" filterable remote reserve-keyword
						:remote-method="customerList" :loading="loading" size="large" placeholder="请输入">
						<el-option v-for="item in customerArr" :key="item.id" :label="item.customerName"
							:value="item.id" />
					</el-select> -->
				</el-form-item>
				<el-form-item label="跟进时间" prop="followupTime" :label-width="90">
					<el-date-picker v-model="planForm.followupTime" type="datetime" 
					placeholder="请选择" size="large" value-format="YYYY-MM-DD HH:mm:ss"
						style="width: 320px;"/>
				</el-form-item>
				<el-form-item label="跟进内容" prop="followupContent" style="margin-right: 0;" :label-width="90">
					<el-input v-model="planForm.followupContent" size="large" placeholder="请输入"
						style="width: 320px;" />
				</el-form-item>
				<el-form-item label="跟进人员" prop="staffName" :label-width="90">
					<el-input disabled v-model="planForm.staffName" size="large" placeholder="请先选择客户" style="width: 320px" />
					<!-- <el-select v-model="planForm.staffId" placeholder="请选择" size="large" style="width: 320px">
						<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select> -->
				</el-form-item>
				<el-form-item label="跟进提醒" prop="reminderType" style="margin-right: 0;" :label-width="90">
					<el-select v-model="planForm.reminderType" placeholder="请选择" size="large" style="width: 320px;">
						<el-option v-for="dict in bus_followup_task" :key="dict.value" :label="dict.label"
							:value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="提醒方式" prop="reminderMethod" :label-width="90">
					<el-radio-group v-model="planForm.reminderMethod" style="width: 340px">
						<el-radio v-for="dict in bus_reminder_method" :key="dict.value" :label="dict.value"
							:value="dict.value" size="large">
							{{dict.label}}
						</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer text-right pr5">
				<el-button class="cancelSubBtn" @click="playDialogVisible = false">取消</el-button>
				<el-button type="primary" class="mainSubBtn" @click="submitPlan('planForm')">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
	<!-- 客户弹窗 -->
	<customerListPop ref="customerDialog" @customerFunc="customerFunc"></customerListPop>
	</div>
</template>

<script>
	
	import {
		customerList//搜索客户
	} from "@/api/business/customer";
	import {
		addFollowupRecord//添加跟进计划
	} from "@/api/business/followup";
	import customerListPop from "@/components/customer/index.vue" //客户弹窗
	export default{
		components: {
			customerListPop
		},
		data(){
			return{
				playDialogVisible: false, //添加计划弹窗
				bus_followup_task: this.useDict("bus_followup_task").bus_followup_task,
				bus_reminder_method: this.useDict("bus_reminder_method").bus_reminder_method,
				planForm: {
					customerId: '', //客户id
					customerName:'',
					followupTime: '', //跟进时间
					followupContent: '', //跟进内容
					staffId: '', //跟进人员
					staffName:'',
					reminderType: '', //提醒方式
					reminderMethod: '', //任务提醒
				},
				rules: {
					taskStatus: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ],
					customerName: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}, ],
					followupTime: [{
						required: true,
						message: "不能为空",
						trigger: "change"
					}, ],
					staffId: [{
						required: true,
						message: "不能为空",
						trigger: "change"
					}, ], //跟进内容
				},
				customerArr: [], //客户列表
			}
		},
		methods:{
			// 关联客户
			chooseCustomer() {
				this.$refs.customerDialog.open()
			},
			//获取选中的客户信息
			customerFunc(e) {
				console.log(e,'eeeee')
				this.planForm.customerId = e.id
				this.planForm.customerName = e.name
				this.planForm.staffId = e.businessManagerId //跟进人员
				this.planForm.staffName = e.businessManagerName
			},
			open(row){
				this.playDialogVisible = true
				this.planForm = {
					customerId: '', //客户id
					customerName:'',
					followupTime: '', //跟进时间
					followupContent: '', //跟进内容
					staffId: '', //跟进人员
					staffName:'',
					reminderType: '', //提醒方式
					reminderMethod: '', //任务提醒
				}
				if(row){
					this.planForm.customerId = row
				}
			},
			close(){
				this.playDialogVisible = false
			},
			// 客户名称
			customerList(query) {
				if (query !== '') {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						let data = {
							keyWords: query
						}
						customerList(data).then(response => {
							this.customerArr = response.rows;
						});
					}, 200);
				} else {
					this.customerArr = [];
				}
			},
			// 提交
			submitPlan(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						addFollowupRecord(this.planForm).then(res => {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.$emit('refresh')
							this.playDialogVisible = false
						})
					}
				})
			},
		}
	}
</script>

<style>
</style>